<template>
  <div v-if="cartType == 1">
    <div v-for="(cart, index) in carts" :key="index">
      <div class="header" style="padding-left: 25px">
        <span style="line-height: 40px"
          ><b>订单时间：{{ cart.createTime }}</b></span
        >
      </div>
      <div class="body">
        <div style="display: inline-block; margin-right: 20px">
          <router-link :to="'/goodview/' + cart.goodId">
            <img
              :src="baseApi + cart.img"
              style="width: 100px; height: 100px"
            />
          </router-link>
        </div>
        <div style="display: inline-block; line-height: 40px">
          <table>
            <tr>
              <th>商品</th>
              <th>规格</th>
              <th>价格</th>
              <th>数量</th>
              <th>总价</th>
              <th>操作</th>
            </tr>
            <tr>
              <a :href="'/goodview/' + cart.goodId">
                <td>{{ cart.goodName }}</td>
              </a>
              <td>{{ cart.standard }}</td>
              <td>{{ realPrice(cart) }}</td>
              <td>
                <el-button
                  style="font-size: 15px"
                  @click="countChangeFlagNew = true"
                  v-if="!countChangeFlagNew"
                >
                  {{ cart.count }}
                </el-button>
                <el-input-number
                  v-model="cart.count"
                  :min="1"
                  :max="cart.store"
                  v-if="countChangeFlagNew"
                  style="width: 120px"
                ></el-input-number>
              </td>
              <td>{{ totalPrice(cart) }}</td>
              <td>
                <el-button
                  type="success"
                  size="mini"
                  @click="pay(cart)"
                  style="font-size: 18px"
                >
                  支付
                </el-button>
                <el-popconfirm @confirm="del(cart)" title="确定删除？">
                  <el-button
                    size="mini"
                    type="danger"
                    slot="reference"
                    style="font-size: 18px"
                  >
                    移除
                  </el-button>
                </el-popconfirm>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>

  <div v-else-if="cartType == 2" style="width: 100%">
    <el-table :data="carts" style="width: 100%">
      <el-table-column prop="goodName" label="商品名" width="180">
        <template #default="scope">
          <span
            @click="gotoPay(scope.row)"
            style="color: var(--color-1); cursor: pointer"
            >{{ scope.row.goodName }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="img" label="封面" width="120">
        <template #default="scope">
          <img
            :src="baseApi + scope.row.img"
            style="width: 100px; height: 100px"
          />
        </template>
      </el-table-column>
      <el-table-column prop="standard" label="规格"></el-table-column>
      <el-table-column prop="price" label="价格" width="80">
        <template #default="scope">
          {{ realPrice(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column prop="count" label="商品数量" width="180">
        <template #default="scope">
          <el-button
            style="font-size: 15px"
            @click="countChangeFlagNew = true"
            v-if="!countChangeFlagNew"
          >
            {{ scope.row.count }}
          </el-button>
          <el-input-number
            v-model="scope.row.count"
            :min="1"
            :max="scope.row.store"
            v-if="countChangeFlagNew"
            style="width: 120px"
          ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="discount" label="总价格" width="80">
        <template #default="scope">
          {{ totalPrice(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column prop="edit" label="操作" width="150">
        <template #default="scope">
          <div class="edit-pay">
            <span
              style="color: var(--color-1); cursor: pointer"
              @click="pay(scope.row)"
              >购买</span
            >
            <span
              style="color: var(--color-1); cursor: pointer"
              @click="del(scope.row)"
              >移出购物车</span
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <div v-else-if="cartType == 3" style="width: 100%">
    <div style="font-size: 24px; color: var(--color-1); text-align: center">
      购物车
    </div>
    <el-table :data="carts" style="width: 100%">
      <el-table-column prop="goodName" label="" width="180">
        <template #default="scope">
          <div @click="gotoPay(scope.row)" class="good-name">
            <img
              :src="baseApi + scope.row.img"
              style="width: 100px; height: 100px"
            />
            <span style="margin-left: 5px">{{ scope.row.goodName }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="standard" label=""></el-table-column>
      <el-table-column prop="price" label="" width="80">
        <template #default="scope">
          <span style="color: var(--color-price)"
            >￥:{{ realPrice(scope.row) }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="count" label="" width="180">
        <template #default="scope">
          <el-button
            style="font-size: 15px"
            @click="countChangeFlagNew = true"
            v-if="!countChangeFlagNew"
          >
            {{ scope.row.count }}
          </el-button>
          <el-input-number
            v-model="scope.row.count"
            :min="1"
            :max="scope.row.store"
            v-if="countChangeFlagNew"
            style="width: 120px"
          ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="discount" label="" width="80">
        <template #default="scope">
          <span style="color: var(--color-price)"
            >￥:{{ totalPrice(scope.row) }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="edit" label="" width="150">
        <template #default="scope">
          <div class="edit-pay">
            <span class="pay-bnt" @click="pay(scope.row)">付款</span>
            <span
              class="pay-bnt"
              style="background-color: var(--color-price)"
              @click="del(scope.row)"
              >移除</span
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

const store = useStore();
const router = useRouter();

// Props
const props = defineProps({
  carts: {
    type: Array,
    default: () => [],
  },
  countChangeFlag: {
    type: Boolean,
    default: false,
  },
  cartType: {
    type: Number,
    default: 1,
  },
});

// Data
const baseApi = ref<string>(store.state.baseApi);
const countChangeFlagNew = computed({
  get() {
    return props.countChangeFlag;
  },
  set(val: boolean) {
    countChangeFlagNew.value = val;
  },
});
// Methods
const gotoPay = (cart: any) => {
  router.push({
    path: "/goodview/" + cart.goodId,
  });
};

const totalPrice = (cart: any) => {
  return (Number(realPrice(cart)) * cart.count).toFixed(2);
};

const realPrice = (cart: any) => {
  return (cart.price * cart.discount).toFixed(2);
};

const del = (cart: any) => {
  store.state.request.delete("/api/cart/" + cart.id).then((res: any) => {
    if (res.code === "200") {
      store.state.message.success("删除成功");
      emit("delete", cart.id);
    }
  });
};

const pay = (cart: any) => {
  const good = {
    id: cart.goodId,
    name: cart.goodName,
    imgs: cart.img,
    discount: cart.discount,
  };
  router.push({
    name: "preOrder",
    query: {
      good: JSON.stringify(good),
      realPrice: realPrice(cart),
      num: cart.count,
      standard: cart.standard,
      cartId: cart.id,
    },
  });
};

// Emits
const emit = defineEmits(["delete"]);
</script>

<style scoped>
.header {
  background-color: var(--shipping-header);
  height: 40px;
  border-radius: 25px 25px 0 0;
}
.body {
  background-color: white;
  padding: 20px;
  border-radius: 0 0 25px 25px;
}
th,
td {
  width: 120px;
  text-align: center;
}
th {
  font-size: 15px;
  color: #00b7ff;
  font-weight: normal;
}
.edit-pay {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.pay-bnt {
  color: var(--color-7);
  cursor: pointer;
  background-color: var(--color-1);
  padding: 5px 10px;
  border-radius: 4px;
}
.good-name {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: var(--color-1);
  cursor: pointer;
}
</style>
